<template>
    <div class="page-content">
        <!--普通商品列表-->
        <div v-if="showType === '0'">
            <div style="background-color: #FFFFFF; padding-bottom: 2px;">
                <view class="goods-list" style="height: 100px; display: flex; margin-bottom: 6px;"
                      v-for="(item, index) in tbGoodsList" :key="index">

                    <view @click.stop.prevent="gotoGoodsDetail(item)">
                        <image style="height: 100px; width: 100px; padding-top: 4px;"
                               :src="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/goods.jpg'"
                               mode="aspectFill"></image>
                    </view>
                    <view style="padding: 6px 5px 5px 10px; width: 100%;" @click.stop.prevent="gotoGoodsDetail(item)">
                        <view style="height: 60px; overflow: hidden;">
                            {{item.title}}
                        </view>
                        <view style="overflow: hidden; color: grey; height: 19px;">
                            {{item.subTitle | toEmptyStr}}
                        </view>
                        <view style="display: flex; border-bottom: 1px solid #eeeeee; padding-bottom: 4px;"
                              :style="{'border-bottom': tbGoodsList.length - 1 === index ? '0px' : '1px solid #eeeeee'}">
                            <view style="font-weight: bold; color: red;">
                                ￥{{item.price | toFixed2}}
                            </view>
                        </view>
                    </view>
                </view>
            </div>

            <div style="padding-top: 10px; padding-bottom: 10px;">
                <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
            </div>
        </div>

        <!--普通商品列表，附加“加入购物车”按钮-->
        <div v-if="showType === '1'">
            <div style="background-color: #FFFFFF; padding-bottom: 2px;">
                <view class="goods-list" style="height: 100px; display: flex; margin-bottom: 6px;"
                      v-for="(item, index) in tbGoodsList" :key="index">

                    <view @click.stop.prevent="gotoGoodsDetail(item)">
                        <image style="height: 100px; width: 100px; padding-top: 4px;"
                               :src="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/goods.jpg'"
                               mode="aspectFill"></image>
                    </view>
                    <view style="padding: 6px 5px 5px 10px; width: 100%;" @click.stop.prevent="gotoGoodsDetail(item)">
                        <view style="height: 60px; overflow: hidden; padding-top: 5px;">
                            {{item.title}}
                        </view>
                        <view style="overflow: hidden; color: grey; height: 19px;">
                            {{item.subTitle | toEmptyStr}}
                        </view>
                        <view style="display: flex; border-bottom: 1px solid #eeeeee; padding-bottom: 4px;"
                              :style="{'border-bottom': tbGoodsList.length - 1 === index ? '0px' : '1px solid #eeeeee'}">
                            <view style="font-weight: bold; color: red; width: 100%;">
                                ￥{{item.price | toFixed2}}
                            </view>
                            <view style="width: 80px;">
                                <u-button type="error" size="mini" @click="addShoppingCart(item)">加入购物车</u-button>
                            </view>
                        </view>
                    </view>
                </view>
            </div>
        </div>

        <!--商户平台，选择加入秒杀的商品-->
        <div v-if="showType === '2'">
            <div style="background-color: #FFFFFF; padding-bottom: 2px;">
                <view class="goods-list" style="height: 100px; display: flex; margin-bottom: 6px;"
                      v-for="(item, index) in tbGoodsList" :key="index">

                    <view @click.stop.prevent="gotoGoodsDetail(item)">
                        <image style="height: 100px; width: 100px; padding-top: 4px;"
                               :src="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/goods.jpg'"
                               mode="aspectFill"></image>
                    </view>
                    <view style="padding: 6px 5px 5px 10px; width: 100%;" @click.stop.prevent="gotoGoodsDetail(item)">
                        <view style="height: 60px; overflow: hidden; padding-top: 5px;">
                            {{item.title}}
                        </view>
                        <view style="overflow: hidden; color: grey; height: 19px;">
                            {{item.subTitle | toEmptyStr}}
                        </view>
                        <view style="display: flex; border-bottom: 1px solid #eeeeee; padding-bottom: 4px;"
                              :style="{'border-bottom': tbGoodsList.length - 1 === index ? '0px' : '1px solid #eeeeee'}">
                            <view style="font-weight: bold; color: red; width: 100%;">
                                ￥{{item.price | toFixed2}}
                            </view>
                            <view style="width: 100px;">
                                <u-button type="error" size="mini" @click="addGoodsSeckill(item)">加入秒杀活动</u-button>
                            </view>
                        </view>
                    </view>
                </view>
            </div>
        </div>
    </div>
</template>

<script>
    import {PaginationModel} from "../dev/core/model/pagination.model";
    import {TbGoodsService} from "../dev/services/tb-goods.service";
    import {CommonUtil} from "../dev/core/utils/common.util";
    import {TbShoppingCartService} from "../dev/services/tb-shopping-cart.service";
    import {TbSeckillGoodsService} from "../dev/services/tb-seckill-goods.service";

    export default {
        props: {
            goodsListFilterParams: Object, // 当前对象
            showType: { // 将图片url赋予哪个属性
                type: String,
                default: "0"
            }
        },
        data: function () {
            return {
                tbGoodsList: [],
            }
        },
        components: {},
        watch: {
            goodsListFilterParams: {
                deep: true, // 深度监听
                handler(newVal, oldVal) {
                    console.log("商品参数改变，即将刷新...", newVal, oldVal)
                    this.tbGoodsList = []
                    this.$forceUpdate();
                    this.$nextTick(() => {
                        this.pagination = new PaginationModel();
                        this.doInfinite();
                    });
                }
            }
        },
        created() {
            this.doInfinite();
        },
        methods: {
            gotoGoodsDetail(item) {
                console.log(item)
                uni.navigateTo({
                    url: `/pages/common/goods-detail/index?${CommonUtil.objectToUrlParams(item)}`
                })
            },
            doInfinite() {
                const _self = this
                let data = {
                    communityId: _self.globalVariable.userInfo.tbCommunity.id,
                    storeId: _self.goodsListFilterParams.storeId,
                    parentStoreClassId: _self.goodsListFilterParams.parentStoreClassId,
                    goodsClassId: _self.goodsListFilterParams.goodsClassId,
                    orderBy: _self.goodsListFilterParams.orderBy
                }

                if (!_self.goodsListFilterParams.storeClassId) {
                    data.title = _self.goodsListFilterParams.searchKeyword
                } else {
                    data.storeClassId = _self.goodsListFilterParams.storeClassId
                }

                new TbGoodsService().findTableListByConsumer({
                    pagination: _self.pagination,
                    data: data
                }).then(result => {
                    _self.pagination.refreshPage(result)
                    _self.tbGoodsList = [..._self.tbGoodsList, ...result.list]
                })
            },
            /**
             * 添加购物车
             */
            addShoppingCart(tbGoods) {
                const _self = this;
                new TbShoppingCartService().saveTbShoppingCart({
                    communityId: this.globalVariable.userInfo.tbCommunity.id,
                    userId: this.globalVariable.userInfo.id,
                    storeId: tbGoods.storeId,
                    goodsId: tbGoods.id,
                    goodsSpecificationId: tbGoods.specificationId,
                    goodsColorId: tbGoods.colorId,
                    quantity: 1,
                    type: '0'  // 类型：0-加入购物车，1-立即购买
                }).then(result => {
                    // 加入购物车
                    CommonUtil.toast('添加购物车成功');
                });
            },
            /**
             * 添加秒杀商品
             */
            addGoodsSeckill(item) {
                const _self = this;
                new TbSeckillGoodsService().findTbSeckillGoodsCount({
                    storeId: item.storeId,
                    goodsId: item.id,
                    goodsSpecificationId: item.specificationId,
                    goodsColorId: item.colorId
                }).then(result => {
                    if (result) {
                        CommonUtil.toast("该商品已加入秒杀活动");
                    } else {
                        _self.navigateTo(`/pages/sub/sub1-tabs/tabs/person/store-platform/store-platform-seckill/store-platform-seckill-goods/store-platform-seckill-goods-add/index`, null, item);
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
</style>
